onload = () => {
    loadCSS("../css/fontello.css", "bootstrap5-icon");
    loadCSS("../css/bootstrap5.min.css", "bootstrap5");
    loadCSS("../css/common.css", "common");
    loadScript("../js/bootstrap5.bundle.min.js")
        .then(() => loadScript("../js/crud.js")).then(() => {
        let detailId = -1;
        let roleOperator = new Crud({
            module: "role",
            search: [{"caption": "Name", "type": "text", "name": "name", class: "col-3"}],
            listField: [{"caption": "ID", "field": "roleId"}, {
                "caption": "Name",
                "field": "name"
            }, {"caption": "Description", "field": "description"}],
            iterators: [{
                name: "user.status", iterator: [{"value": 0, "caption": "enable"}, {"value": 1, "caption": "disable"}]
            }, {name: "user.type", iterator: [{"value": 0, "caption": "normal"}, {"value": 1, "caption": "virtual"}]}],
            editFields: [
                {caption: "Name", "name": "name", "placeHolder": "", "required": "required"},
                {caption: "Description", "name": "description"}
            ],
            extendAttribute: [{name: "roleId", type: "getUsersByRole"},
                {name: "roleId", type: "getOperationsByRole"}
            ],
            rowBtn: ["edit", "delete", {
                "caption": "icon-icon-search",
                "class": "btn btn-primary",
                hint: "Browse Detail",
                "callback": (e, row, tr, outer) => {
                    e.preventDefault();
                    outer.subTable["userList"].load(row["roleId_getUsersByRole"]);
                    outer.subTable["operationList"].load(row["roleId_getOperationsByRole"]);
                    detailId = row["roleId"];
                    canvas.show();
                }
            }],
            subTable: [{
                name: "userList",
                tableId: "userTable",
                listField: [{"caption": "ID", "field": "userId"},
                    {"caption": "Name", "field": "userName"},
                    {"caption": "Type", "field": "type", iterator: "user.type"},
                    {"caption": "Status", "field": "status", iterator: "user.status"}],
                opsBtn: [{caption: "icon-icon-search"}]
            }, {
                name: "operationList",
                tableId: "operationTable",
                opsBtn: [{
                    caption: "Grant",
                    "action": "modal",
                    param: "#opModal",
                    callback: () => ajax("/common/mapper?type=getOperationsByRole&id=" + detailId, {"Method": "GET"}).then(data => data.data).then(data => {
                        let cbx = document.getElementById("opModal").querySelector("form").elements["roleCheckbox"];
                        const chosen = data[detailId].map(item => String(item.operationId));
                        cbx.forEach(item => item.checked = chosen.indexOf(String(item.value)) !== -1)
                    }),
                    commit: (form, event) => {
                        let operationId = Array.from(form.querySelectorAll("input[name='roleCheckbox']:checked")).map(item => item.value);
                        let url = `roleId=${detailId}`+ operationId.map(i=>`&operationId=${i}`).join('');
                        return ajax(`/permission/role/operation?${url}`,{method:"GET"});
                    }
                }],
                listField: [
                    {"caption": "ID", "field": "operationId"},
                    {"caption": "Name", "field": "name"},
                    {"caption": "Description", "field": "description"}]
            }, {
                name: "allOperation",
                tableId: "allOperationTable",
                hasCheckbox: true,
                pk: "operationId",
                listField: [
                    {"caption": "ID", "field": "operationId"},
                    {"caption": "Name", "field": "name"},
                    {"caption": "Description", "field": "description"}]
            }]
        });
        roleOperator.init();
        const canvas = new bootstrap.Offcanvas(document.getElementById('roleRelation'));
        ajax("/common/mapper?type=operationList", {"Method": "GET"}).then(data => data.data).then(data => {
            roleOperator.subTable("allOperation")
                .load(data)
        });
    }).catch((err) => console.error(err));
}
